<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}"/>
</head>
<body>
<div>
    <div style="display: block;" id="top">
        <div>
            <button id="userManagement" class="layui-btn">添加操作员</button>
        </div>
        <div>
            <table id="management" lay-filter="management"></table>
        </div>
    </div>
    <div style="display: none;height: 600px; overflow: hidden;" id="bottom">
        <iframe src="./addOperator.html" width="100%" height="100%" style="height: 600px;"></iframe>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['table', 'jquery', 'element'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            table = layui.table,
            element = layui.element;

        //第一个实例
        table.render({
            elem: '#management'
            , height: 312
            , url: '/demo/table/user/' //数据接口
            , page: true //开启分页
            , cols: [
                [ //表头
                    {field: 'id', title: 'ID', width: 80}
                    , {field: '', title: '用户账号', width: 80}
                    , {field: '', title: '用户密码', width: 80}
                    , {field: '', title: '操作员名称', width: 80}
                    , {field: '', title: '操作员权限', width: 80}
                    , {field: '', title: '操作员状态', width: 80}
                ]
            ]
        });
        $(document).on('click', '#userManagement', function () {
            document.getElementById('top').style.display='none';
            document.getElementById('bottom').style.display='block';
        })
    })
</script>
</body>
</html>
